/**
 * MCP Settings Page
 * 
 * Main settings page for MCP server and tool management
 */

import { useState } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { MCPServerList } from '@/components/mcp/MCPServerList';
import { MCPServerConfig } from '@/components/mcp/MCPServerConfig';
import { ToolList } from '@/components/mcp/ToolList';

export function MCPSettings() {
  const [showAddForm, setShowAddForm] = useState(false);
  const [refreshKey, setRefreshKey] = useState(0);

  const handleSave = () => {
    setShowAddForm(false);
    setRefreshKey((prev) => prev + 1); // Trigger refresh
  };

  const handleCancel = () => {
    setShowAddForm(false);
  };

  return (
    <div className="container max-w-6xl mx-auto p-6 space-y-6">
      <div>
        <h1 className="text-3xl font-bold">MCP 管理</h1>
        <p className="text-muted-foreground mt-2">
          管理 Model Context Protocol (MCP) 服务器和工具
        </p>
      </div>

      <Tabs defaultValue="servers" className="w-full">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="servers">MCP 服务器</TabsTrigger>
          <TabsTrigger value="tools">可用工具</TabsTrigger>
        </TabsList>

        <TabsContent value="servers" className="space-y-4 mt-6">
          {showAddForm ? (
            <MCPServerConfig
              onSave={handleSave}
              onCancel={handleCancel}
            />
          ) : (
            <MCPServerList
              key={refreshKey}
              onAddClick={() => setShowAddForm(true)}
            />
          )}
        </TabsContent>

        <TabsContent value="tools" className="mt-6">
          <ToolList key={refreshKey} />
        </TabsContent>
      </Tabs>
    </div>
  );
}
